<template>
  <div id="app">
    <el-container>
      <el-main>
        <router-view/>
        <el-backtop target=".el-container .el-main" :bottom="100" :visibility-height="50">
           <div
            style="{
              height: 100%;
              width: 100%;
              background-color: #f2f5f6;
              box-shadow: 0 0 6px rgba(0,0,0, .12);
              text-align: center;
              line-height: 40px;
              color: #1989fa;
            }">
            UP
          </div>
        </el-backtop>
      </el-main>
      <el-footer>
        <el-row class="radius radius-30">
          <el-col :span="8">
            <div class="grid-content">
              <el-link href="/" type="primary"><el-button type="primary" round>账本</el-button></el-link>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <el-link href="/add" type="success"><el-button type="success" icon="el-icon-plus" circle></el-button></el-link>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <el-link  href="/charts" type="info"><el-button type="info" round>报表</el-button></el-link>
            </div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      title: '首页',
      activeIndex: '/'
    }
  }
}
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 600px;
    overflow: hidden;
  }
  .radius {
    height: 60px;
    padding:10px;
    border: 1px solid #d7dae2;
    border-radius: 0;
    margin-top: 20px;
  }
  .radius-30 {
    border-radius: 30px;
  }
</style>
